/******************** 变量 ********************/
$lv-switch-label-color: #ffffff;
$lv-switch-icon-bg-color: #ffffff;
$lv-switch-border-color: transparent;
$lv-switch-loading-icon-color: #47516b;

/******************** minxin ********************/
@mixin defaultSwitch {
  .lv-switch {
    margin: 0;
    padding: 0;
    display: inline-block;
    position: relative;
    vertical-align: top;
    min-width: 0.32rem;
    height: 0.16rem;
    line-height:0.16rem;
    border: 0 $border-style-base $lv-switch-border-color;
    border-radius: 0.12rem;
    background: $switch-normal-bg-color;
    overflow: hidden;
    user-select: none;
    cursor: pointer;
    font-size: $font-size-base;
    font-family: $font-family;
    color: $text-color;

    &:focus {
      outline: none;
    }
    &:disabled {
      background: $switch-disabled-bg-color;
      cursor: not-allowed;

      &::after {
        cursor: not-allowed;
      }
    }

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 0.02rem;
      left: 0.02rem;
      width: 0.12rem;
      height: 0.12rem;
      background-color: $lv-switch-icon-bg-color;
      border-radius: 0.12rem;
      cursor: pointer;
      transform: translateX(0);
      @include motion-state;
    }

    .lv-switch-loading-icon {
      display: block;
      position: absolute;
      width: 0.1rem;
      height: 0.1rem;
      left: 0.03rem;
      top: 0.03rem;
      z-index: 1;
      color: $lv-switch-loading-icon-color;
      cursor: not-allowed;
    }

    > .lv-switch-label-on,
    > .lv-switch-label-off,
    > .lv-switch-bg-on,
    > .lv-switch-bg-off {
      display: flex;
      align-items: center;
      font-size: 0.12rem;
      height: 0.16rem;
      white-space: nowrap;
      overflow: hidden;
      padding: 0 0.18rem 0 0.06rem;
    }
    > .lv-switch-label-off,
    > .lv-switch-bg-off {
      padding: 0 0.06rem 0 0.18rem;
    }

    > .lv-switch-label-on,
    > .lv-switch-label-off {
      position: absolute;
      top: 0;
      color: $lv-switch-label-color;
      @include motion-state;
    }
    > .lv-switch-label-on {
      left: -100%;
    }
    > .lv-switch-label-off {
      right: 0%;
    }

    > .lv-switch-bg-on,
    > .lv-switch-bg-off {
      opacity: 0;
    }
  }

  .lv-switch-on {
    background: $switch-on-normal-bg-color;

    &:focus {
      outline: none;
    }
    &:disabled {
      background: $switch-on-disabled-bg-color;
      cursor: not-allowed;
    }

    &::after {
      left: 100%;
      transform: translateX(-0.14rem);
    }

    .lv-switch-loading-icon {
      left: calc(100% - 0.13rem);
    }

    > .lv-switch-label-on {
      left: 0%;
    }
    > .lv-switch-label-off {
      right: -100%;
    }
  }
}
@mixin largeSwitch {
  .lv-switch {
    min-width: 0.4rem;
    height: 0.2rem;
    line-height: 0.2rem;
    border: 0 $border-style-base $lv-switch-border-color;
    border-radius: 0.16rem;

    &::after {
      top: 0.02rem;
      left: 0.02rem;
      width: 0.16rem;
      height: 0.16rem;
      border-radius: 0.16rem;
    }

    .lv-switch-loading-icon {
      top: 0.04rem;
      left: 0.04rem;
      width: 0.12rem;
      height: 0.12rem;
    }

    > .lv-switch-label-on,
    > .lv-switch-label-off,
    > .lv-switch-bg-on,
    > .lv-switch-bg-off {
      height: 0.2rem;
      padding: 0 0.22rem 0 $padding-sm;
      font-size: $font-size-base;
    }

    > .lv-switch-label-off,
    > .lv-switch-bg-off {
      padding: 0 0.08rem 0 0.22rem;
    }
  }

  .lv-switch-on {
    &::after {
      left: 100%;
      transform: translateX(-0.18rem);
    }

    .lv-switch-loading-icon {
      left: calc(100% - 0.15rem);
    }
  }
}

/******************** 组件 ********************/
.lv-switch-host {
  display: inline-block;
  height: 0.16rem;
  vertical-align: middle;

  @include defaultSwitch;

  &.lv-switch-large {
    height: 0.2rem;
  }
}

.lv-switch-large {
  @include largeSwitch;
}

.lv-switch-loading {
  cursor: not-allowed;
  opacity: 0.5;

  > .lv-switch-inner {
    cursor: not-allowed;
  }

  &::after {
    cursor: not-allowed;
  }
}
